<template>
  <Modal
    v-model="model"
    title="修改分类"
    @on-ok="ok"
    @on-cancel="cancel"
  >
    <Form
      ref="formValidate"
      :model="formValidate"
      :label-width="80"
    >
      <FormItem
        label="标识"
        prop="name"
      >
        <Input v-model="formValidate.name"></Input>
      </FormItem>
      <FormItem
        label="标题"
        prop="title"
      >
        <Input v-model="formValidate.title"></Input>
      </FormItem>
      <FormItem
        label="排序"
        prop="sort"
      >
        <Input v-model="formValidate.sort"></Input>
      </FormItem>
      <FormItem
        label="icon"
        prop="title"
      >
        <img
          style="width:80px;height:80px"
          :src="formValidate.icon"
          alt=""
        >
        <Upload
          :action="upload_qiniu_url"
          :show-upload-list="false"
          :on-success="handleAvatarSuccess"
          :data="qiniuData"
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
        >
          <Button>更换图片</Button>
        </Upload>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import { categoryDetail, getToken, addCategory } from "@/api/data";

export default {
  props: ["storeId", "mgStoreShow"],
  data() {
    return {
      formValidate: {},
      upload_qiniu_url: "",
      upload_qiniu_addr: "",
      qiniuData: {},
      model: false,
      id: ""
    };
  },
  watch: {
    storeId(val) {
      this.id = val;
      this.getDitaile();
    },
    mgStoreShow(val) {
      this.model = val;
    }
  },
  mounted() {
    this.model = this.mgStoreShow;
    getToken().then(res => {
      if (res.code == 200) {
        this.upload_qiniu_url = res.upload_qiniu_url;
        this.upload_qiniu_addr = res.upload_qiniu_addr;
        this.qiniuData.token = res.uptoken;
      }
    });
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.$set(this.formValidate, "icon", this.upload_qiniu_addr + res.key);
    },
    beforeAvatarUpload(file) {
      this.qiniuData.key = file.name;

      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    handleError: function(res) {
      this.$message({
        message: "上传失败",
        duration: 2000,
        type: "warning"
      });
    },
    getDitaile() {
      categoryDetail({ id: this.id }).then(res => {
        this.formValidate = {
          id: res.data.id,
          name: res.data.name,
          title: res.data.title,
          platform: res.data.platform,
          sort: res.data.sort,
          icon: res.data.icon
        };
      });
    },
    ok() {
      addCategory(this.formValidate).then(res => {
        this.$emit("on-click", true);
      });
    },
    cancel() {
      this.$emit("on-click", false);
    }
  }
};
</script>


